import { computed, defineComponent, type PropType } from 'vue';
import dayjs from 'dayjs';

enum DateFormat {
    DEFAULT = 'YYYY-MM-DD HH:mm:ss',
    DATE_ONLY = 'YYYY-MM-DD',
    TIME_ONLY = 'HH:mm:ss',
}

interface DateProps {
    date?: Date;
    format?: DateFormat;
    style?: Record<string, string | number>; // 新增属性，接收一个样式对象
}

const DateComponent = defineComponent({
    name: 'DateComponent',
    props: {
        date: {
            type: Date,
            default: () => null
        },
        format: {
            type: String as PropType<DateFormat>,
            default: () => DateFormat.DEFAULT
        },
        style: {
            type: Object as PropType<Record<string, string | number>>,
            default: () => ({})
        }
    },
    setup(props: DateProps) {
        const dateStr = computed(() => {
            if (!props.date) {
                console.warn('Invalid date provided to DateComponent');
                return '';
            }
            return dayjs(props.date).format(props.format);
        });
        return () => (
            <span style={props.style}>{dateStr.value}</span>
        );
    }
});

export default DateComponent;